<!-- 封面模版 -->
<template>
  <div class="container">
    <el-row>
      <el-col :span="12">
        <el-form :model="CoverForm" ref="CoverForm" label-width="130px" size="mini" class="demo-ruleForm">
          <el-table :data="CoverForm.fields" border style="width: 100%" height="55vh">
            <el-table-column prop="fieldId" label="打印字段" width="">
              <template #default="scope">
                <el-select :ref="'Cover' + scope.row.templateFieldId" v-model="scope.row.fieldId" placeholder="请选择"
                  @change="(e) => selectBoxChange(e, scope.row)" clearable size="mini">
                  <el-option v-for="item in CoverFieldOptions" :key="item.defineId" :label="item.fieldTitle"
                    :value="item.fieldId" :disabled="CoverHasList.includes(item.fieldId)">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="fieldTitle" label="字段标题" width="">
              <template #default="scope">
                <el-input v-model="scope.row.fieldTitle" placeholder="请输入字段标题" clearable size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="fieldName" label="字段名称" width=""> </el-table-column>
            <!-- <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  @click="deleteBox(row)"
                ></el-button>
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  circle
                  size="mini"
                  @click="addBox()"
                ></el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <el-form-item class="margin10Top">
            <el-button type="primary" size="medium" @click="CoverSumbit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="封面示例:" class="max-height-form" style="max-height: 55vh">
            <CoverStyle :title="CoverForm.fields"></CoverStyle>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CoverStyle from './CoverStyle.vue'
import { edit, queryFieldBox, queryCoverTemp } from '@/api/sys/template'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'cover',
  components: { CoverStyle },
  data() {
    return {
      form: {},
      CoverForm: {},
      CoverHasList: [],
      CoverFieldOptions: [],
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    // 获取封面的模版
    queryCoverTemp() {
      queryCoverTemp()
        .then((res) => {
          if (res.data.code == 200) {
            this.CoverForm = res.data.data
            if (this.CoverForm.fields.length > 0) {
              this.CoverForm.fields.forEach((row) => {
                if (this.CoverFieldOptions.some((item) => item.fieldId === row.fieldId)) {
                  this.CoverHasList.push(row.fieldId)
                }
              })
            }
          } else {
            this.$message.warning(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    queryFieldBox() {
      queryFieldBox()
        .then((res) => {
          if (res.data.code == 200) {
            this.CoverFieldOptions = res.data.data
          } else {
            this.$message.warning(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    selectBoxChange(e, row) {
      if (this.$refs['Cover' + row.templateFieldId].value === undefined) {
        this.CoverHasList.push(e)
      } else {
        this.CoverHasList = this.CoverHasList.filter(
          (item) => item !== this.$refs['Cover' + row.templateFieldId].value
        )
        this.CoverHasList.push(e)
      }
      if (e === '') {
        // this.CoverForm.fields中和row相同的一条数据的fieldTitle为空
        this.CoverForm.fields.forEach((item) => {
          if (item.templateFieldId === row.templateFieldId) {
            item.fieldTitle = ''
          }
        })
      } else {
        this.CoverForm.fields.forEach((item) => {
          if (item.templateFieldId === row.templateFieldId) {
            item.fieldTitle = this.CoverFieldOptions.filter(
              (item) => item.fieldId === e
            )[0].fieldTitle
            item.fieldName = this.CoverFieldOptions.filter(
              (item) => item.fieldId === e
            )[0].fieldName
          }
        })
      }
    },
    CoverSumbit() {
      this.$refs['CoverForm'].validate((valid) => {
        if (valid) {
          // 表格中的打印字段不能存在空值
          if (this.CoverForm.fields.some((item) => item.fieldId === '')) {
            this.$message.warning('请选择打印字段')
            return
          }
          edit(this.CoverForm)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message.success(res.data.message)
              }
            })
            .catch((err) => {
              this.$message.error(err)
            })
        }
      })
    },
    addBox() {
      this.CoverForm.fields.push({
        templateFieldId:
          new Date().getTime().toString() + Math.floor(Math.random() * 100).toString(),
        templateId: this.CoverForm.templateId,
        fieldId: '',
        fieldTitle: '',
        fieldName: '',
        fontFamily: '',
        fontSize: null,
      })
    },
    deleteBox(row) {
      this.CoverForm.fields = this.CoverForm.fields.filter((item) => item.fieldId !== row.fieldId)
      this.CoverHasList = this.CoverHasList.filter((item) => item !== row.fieldId)
    },
  },
}
</script>
<style lang="less" scoped></style>
